/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

.root {
  @include styles.styles-reset;
  @include styles.text-wrapping;
}

.header {
  @include styles.font-panel-header;
  margin-block: 0;
  margin-inline: 0;
  padding-block: awsui.$space-panel-header-vertical;
  padding-inline-start: awsui.$space-panel-nav-left;
  // Additional xl space to prevent text from overlapping the close button.
  padding-inline-end: calc(#{awsui.$space-scaled-xxl} + #{awsui.$space-xl});
}

.header-link {
  @include styles.font-panel-header;
  color: awsui.$color-text-heading-default;
  min-block-size: awsui.$font-panel-header-line-height;

  display: flex;

  &--has-logo {
    > .header-link-text {
      font-weight: styles.$font-weight-normal;
      align-self: center;
    }
  }
}

.header-logo {
  margin-inline-end: awsui.$space-s;
  margin-block-start: awsui.$space-xxxs;
  max-inline-size: calc(1.25 * #{awsui.$size-icon-big});
  align-self: flex-start;

  &--stretched {
    max-inline-size: 100%;
    margin-inline-end: 0;
  }
}

.items-control {
  padding-inline: awsui.$space-l;
}

.list-container {
  margin-block-end: awsui.$space-panel-content-bottom;
}

.items-control,
.list-container {
  margin-block-start: awsui.$space-panel-content-top;
  // Toolbar removes margin for whichever one comes first after the header
  .with-toolbar > .divider-header + & {
    margin-block-start: 0;
  }
}

.list {
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline-end: 0;
  padding-inline-start: awsui.$space-l;
}

.list-variant-root {
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline-start: awsui.$space-panel-nav-left;
  padding-inline-end: awsui.$space-panel-side-right;

  &--first {
    margin-block-start: 0;
  }
}

.list-variant-expandable-link-group {
  padding-inline-start: awsui.$space-xxxl;
}

.list-item {
  margin-block: awsui.$space-scaled-xs;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  list-style: none;

  // Remove margin from first item in side nav, outer block margins are covered by list-container
  .list-variant-root--first > &:first-child {
    margin-block-start: 0px;
  }
}

.section,
.expandable-link-group {
  margin-inline-start: calc(-1 * #{awsui.$space-l});

  &--no-ident {
    margin-inline-start: 0;
  }
}

.section {
  margin-block: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
  &.refresh {
    margin-block: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
  }
  // Remove margin from section if it is the first item in side nav to prevent double margin stacking
  .list-variant-root--first > .list-item:first-child > & {
    margin-block-start: 0px;
  }
  // HACK: Remove padding from section header and content to rely on margin collapsing rules.
  /* stylelint-disable-next-line selector-max-type */
  > div {
    padding-block: 0;
    padding-inline: 0;
  }
}

.list-variant-section-group {
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
}

.section-group {
  @include styles.font-heading-m;
  margin-block: 0;
  margin-inline: 0;
}

.section-group-title {
  /* used in test-utils */
}

.link {
  @include styles.font-body-m;
  color: awsui.$color-text-body-secondary;
  font-weight: styles.$font-weight-normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.link-active {
  font-weight: awsui.$font-wayfinding-link-active-weight;
  @include styles.font-smoothing;
  color: awsui.$color-text-accent;
}

.header-link,
.link {
  text-decoration: none;

  &:hover {
    color: awsui.$color-text-accent;
  }

  &:focus {
    outline: none;
  }

  &:hover,
  &:focus {
    text-decoration: none;
  }

  @include focus-visible.when-visible {
    @include styles.link-focus;
  }
}

.info {
  margin-inline-start: awsui.$space-xs;
}

.external-icon {
  margin-inline-start: awsui.$space-xxs;
}

.divider {
  border-block: none;
  border-inline: none;
}

.divider-default {
  margin-block: awsui.$space-scaled-2x-xl;
  margin-inline: calc(-1 * #{awsui.$space-panel-divider-margin-horizontal});
  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
}

.divider-header {
  margin-block: 0;
  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
  .with-toolbar > & {
    border-color: transparent;
  }
}
